<{include file="page/header.htm"}>
<link rel="stylesheet" type="text/css"
    href="/skin/adminhtml/webuploader/webuploader.css">
<div class="page-content">
    <!-- Page Breadcrumb -->
    <div class="page-breadcrumbs">
        <ul class="breadcrumb">
            <li><i class="fa fa-home"></i> <a href="#">产品管理</a></li>
            <li class="active">装修案例列表</li>
        </ul>
    </div>
    <!-- /Page Breadcrumb -->

    <!-- Page Header -->
    <div class="page-header position-relative">
        <div class="header-title">
            <h1>装修面积列表</h1>
            <small> <i class="fa fa-angle-right"></i> <{if
                $item}>编辑<{else}>添加<{/if}>装修案例
            </small>
        </div>
        <!--Header Buttons-->
        <div class="header-buttons">
            <a class="sidebar-toggler" href="#"> <i class="fa fa-arrows-h"></i>
            </a> <a class="refresh" id="refresh-toggler" href=""> <i
                class="glyphicon glyphicon-refresh"></i>
            </a> <a class="fullscreen" id="fullscreen-toggler" href="#"> <i
                class="glyphicon glyphicon-fullscreen"></i>
            </a>
        </div>
        <!--Header Buttons End-->
    </div>
    <!-- /Page Header -->
    <!-- Page Body -->
    <div class="page-body">

        <{include file="page/msg.htm"}>

        <div class="row">
            <div class="col-lg-12 col-sm-12 col-xs-12">
                <div class="widget radius-bordered">
                    <div class="widget-header bg-themeprimary">
                        <span class="widget-caption"><{if
                            $item}>编辑<{else}>添加<{/if}>装修案例</span>
                        <div class="widget-buttons">
                            <button type="button" class="btn btn-success"
                                onclick="window.location='<{url path='goods/caselist'}>';">
                                <i class="fa fa-mail-reply-all"></i>返回
                            </button>
                        </div>
                    </div>
                    <div class="widget-body">

                        <form id="dataForm" method="post" class="form-horizontal"
                            enctype="multipart/form-data"
                            action="<{url path='goods/caseedit'}>">
                            <input type="hidden" name="id" value="">
                            <div class="row">
                                <div class="col-sm-12 col-xs-12">
                                    <div class="tabbable">
                                        <div class="tab-content">
                                            <div id="home" class="tab-pane in active">
                                                <div class="row">
                                                    <div class="col-sm-7 col-xs-7">
                                                        <div class="form-group">
                                                            <label class="col-lg-4 control-label">案例名称<span
                                                                class="red">*</span></label>
                                                            <div class="col-lg-8">
                                                                <input type="text" class="form-control"
                                                                    name="name" id="name" datatype="*1-10"
                                                                    nullmsg="案例名称不能为空!" errormsg="案例名称至少1个字符,最多10个字符！" />
                                                            </div>
                                                        </div>
                                                        
                                                        <div class="form-group">
                                                            <label class="col-lg-4 control-label">装修类型<span class="red">*</span></label>
                                                            <div class="col-lg-8">
                                                                
                                                                <select class="form-control" name="cat_id" datatype="n" nullmsg="装修风格为空!">
                                                                    <option value="1">家装</option>
                                                                    <option value="2">工装</option>
                                                                </select>
                                                                
                                                            </div>
                                                        </div>
                                                        
                                                        <div class="form-group">
                                                            <label class="col-lg-4 control-label">装修风格<span class="red">*</span></label>
                                                            <div class="col-lg-8">
                                                                
                                                                <select class="form-control" name="style" datatype="n" nullmsg="装修风格为空!">
                                                                    <{foreach from=$zxstyle item=row }>
                                                                        <option value="<{$row->id}>"><{$row->style_name}></option>
                                                                    <{/foreach}>
                                                                </select>
                                                                
                                                            </div>
                                                        </div>
                                                        
                                                        
                                                        <div class="form-group">
                                                            <label class="col-lg-4 control-label">装修户型<span class="red">*</span></label>
                                                            <div class="col-lg-8">
                                                                
                                                                <select class="form-control" name="size" datatype="n" nullmsg="装修户型为空!">
                                                                    <{foreach from=$zxsize item=row }>
                                                                        <option value="<{$row->id}>"><{$row->name}></option>
                                                                    <{/foreach}>
                                                                </select>
                                                                
                                                            </div>
                                                        </div>
                                                        
                                                        <div class="form-group">
                                                            <label class="col-lg-4 control-label">装修面积<span
                                                                class="red">*</span></label>
                                                            <div class="col-lg-8">
                                                                <input type="text" class="form-control"
                                                                    name="area" id="area" datatype="*1-10"
                                                                    nullmsg="装修面积不能为空!" errormsg="装修面积至少1个字符,最多10个字符！" />
                                                            </div>
                                                        </div>
                                                        
                                                        <div class="form-group">
                                                            <label class="col-lg-4 control-label">装修面积区间<span class="red">*</span></label>
                                                            <div class="col-lg-8">
                                                                
                                                                <select class="form-control" name="area_group" >
                                                                    <{foreach from=$zxarea item=row }>
                                                                        <option value="<{$row->id}>"><{$row->name}></option>
                                                                    <{/foreach}>
                                                                </select>
                                                                
                                                            </div>
                                                        </div>
                                                        
                                                        
                                                        <div class="form-group">
                                                            <label class="col-lg-4 control-label">装修成本<span
                                                                class="red">*</span></label>
                                                            <div class="col-lg-8">
                                                                <input type="text" class="form-control"
                                                                    name="price" id="price" datatype="*1-10"
                                                                    nullmsg="装修成本不能为空!" errormsg="装修成本至少1个字符,最多10个字符！" />
                                                                <span class="help-block" style="display:inline-block; margin-left:5px;">单位：万元</span>
                                                            </div>
                                                        </div>
                                                        
                                                        <div class="form-group">
                                                            <label class="col-lg-4 control-label">装修成本区间<span class="red">*</span></label>
                                                            <div class="col-lg-8">
                                                                
                                                                <select class="form-control" name="price_group" >
                                                                    <{foreach from=$zxprice item=row }>
                                                                        <option value="<{$row->id}>"><{$row->name}></option>
                                                                    <{/foreach}>
                                                                </select>
                                                                
                                                            </div>
                                                        </div>
                                                        
                                                        <div class="form-group">
                                                            <label class="col-lg-4 control-label">设计师<span class="red">*</span></label>
                                                            <div class="col-lg-8">
                                                                
                                                                <select class="form-control" name="design_id" >
                                                                    <{foreach from=$designer item=row }>
                                                                        <option value="<{$row->id}>"><{$row->name}></option>
                                                                    <{/foreach}>
                                                                </select>
                                                                
                                                            </div>
                                                        </div>
                                                        
                                                        <div class="form-group">
                                                            <label class="col-lg-4 control-label">封面图<span
                                                                class="red">*</span></label>
                                                            <div class="col-lg-8">
                                                                 <input type="file" name="img"  accept=".jpeg,.jpg,.png,.git,.bmp"/>
                                                                    <{if $item->img }>
                                                                        <a target="_blank" href="<{$item->img}>"><img src="<{$item->img}>" width="100" height="50" /></a>
                                                                    <{/if}>
                                                            </div>
                                                        </div>
                                                        
                                                        <div class="form-group">
                                                            <label class="col-lg-4 control-label">简介<span
                                                                class="red">*</span></label>
                                                            <div class="col-lg-8">
                                                                <textarea class="form-control" name="desc"></textarea>
                                                            </div>
                                                        </div>
                                                        
                                                        <div class="form-group">
	                                                        <label class="col-lg-4 control-label">案例相册</label>
	                                                        <div class="col-lg-8">
	                                                            <div id="picker" style="display:inline-block">选择文件</div>
	                                                            <span class="help-block" style="display:inline-block; margin-left:5px;">可以上传多张图片，大小不得超过3M</span>
	                                                        </div>
	                                                    </div>
	                                                    
	                                                    <div class="form-group">
	                                                         <label class="col-lg-4 control-label"></label>
	                                                          <div class="col-lg-8">
	                                                                 <style type="text/css">
	                                                                    #thelist .thumbnail{ width:150px; height:155px; float:left; margin-right:5px; margin-bottom:5px; overflow:hidden}
	                                                                    #thelist .thumbnail .info{ width:100%; float:left; text-align:center; margin-top:5px;}
	                                                                    #thelist  .bordered-themeprimary{ border-width:2px;}
	                                                                    #thelist  .progress{ width:120px; margin:0 auto; margin-top:5px;}
	                                        
	                                                                 </style>
	                                                                 <input type="hidden" name="goods_img" value="" />
	                                                                <div id="thelist" class="uploader-list">
	                                                                        <{foreach from=$imgitems item=pic}>
	                                                                            <div class="file-item thumbnail">
	                                                                               <img  style="width:120px; height:120px;" src="<{$pic->img_url}>" />
	                                                                               <input type="hidden" name="pic[]" value="<{$pic->img_url}>" />
	                                                                               <div class="progress" style="display: none;">
	                                                                                <div class="progress-bar progress-bar-palegreen" style="width: 100%;"></div>
	                                                                               </div>
	                                                                               <div class="info">
	                                                                                <!-- <a onclick="setMainFileItem(this)" href="javascript:void(0)">设为封面</a> --> 
	                                                                                <a onclick="removeFileItem(this);" href="javascript:void(0)">删除</a>
	                                                                               </div>
	                                                                              </div>
	                                                                        <{/foreach}>
	                                                                </div>
	                                                          </div>
	                                                    </div>
                                                        
                                                    </div>
                                                </div>
                                            </div>



                                            <div class="row" style="margin-top: 20px;">
                                                <div class="col-sm-6 col-xs-6">
                                                    <div class="form-group">
                                                        <div class="col-lg-offset-4 col-lg-8">
                                                            <input class="btn btn-primary" type="submit" value="提交" />
                                                            <button type="button" class="btn btn-warning"
                                                                onclick="window.location='<{url path='goods/caselist'}>';">返回</button>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>


                                        </div>


                                    </div>

                                </div>
                            </div>

                        </form>

                    </div>
                </div>
            </div>

        </div>

    </div>
    <!-- /Page Body -->
</div>
<{include file="page/footer.htm"}>
<script src="/skin/adminhtml/js/form.js"></script>
<script src="/skin/adminhtml/js/Validform.js"></script>
<script src="/skin/adminhtml/js/tools.js"></script>
<script type="text/javascript" src="/skin/adminhtml/webuploader/webuploader.js"></script>
<script type="text/javascript">
    
    
    function removeFileItem(obj)
    {
        $pobj = $(obj).parent().parent();
        var img = $pobj.find('input').val();
        var cimg = $('input[name="goods_img"]').val();
        if(img == cimg){
            $('input[name="goods_img"]').val('');
        }
        $pobj.remove();
    }
    
    
    
    $(document).ready(function () {
        
        validate('#dataForm');
        
        var form = new Form('dataForm');
        form.init(<{json data=$item }>);
        
        var UPLOADURL = "<{url path='tools/upload'}>";
        
        var uploader = WebUploader.create({
            // swf文件路径
            swf:  '/skin/adminhtml/webuploader/Uploader.swf',
            // 文件接收服务端。
            server: '<{url path="tools/upload"}>',
            // 选择文件的按钮。可选。
            // 内部根据当前运行是创建，可能是input元素，也可能是flash.
            pick: '#picker',
            // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
            resize: false,
            duplicate: true,//不去重
            accept: {
                title: 'Images',
                extensions: 'gif,jpg,jpeg,bmp,png',
                mimeTypes: 'image/*'
            }
        });
        
            
        // 当有文件添加进来的时候
        uploader.on( 'fileQueued', function( file ) {
            var $li = $(
                    '<div id="' + file.id + '" class="file-item thumbnail">' +
                        '<img>' +
                        '<input type="hidden" value="" name="pic[]" />'+
                        '<div class="progress"><div style="width: 30%" class="progress-bar progress-bar-palegreen"></div></div>'+
                        '<div class="info"><a href="javascript:void(0)" onclick="removeFileItem(this);">删除</a></div>' +
                    '</div>'
                    ),
            $img = $li.find('img');
            
            $info = $li.find('.info');
            $progress = $li.find('.progress');
            
            $info.hide();
            $progress.show();
            
            // $list为容器jQuery实例
            $("#thelist").append($li);
        
            // 创建缩略图
            // 如果为非图片文件，可以不用调用此方法。
            // thumbnailWidth x thumbnailHeight 为 100 x 100
            uploader.makeThumb( file, function( error, src ) {
                if ( error ) {
                    $img.replaceWith('<span>不能预览</span>');
                    return;
                }
                $img.attr( 'src', src );
            }, 120, 120 );
            
            uploader.upload();
            
            uploader.on( 'uploadProgress', function( file, percentage ) {
                 var v = percentage*100;
                 $("#"+file.id).find('.progress').css('width',v+'%');
            });
            uploader.on( 'uploadSuccess', function( file ,response) {
                    $("#"+file.id).find('.info').show();
                    $("#"+file.id).find('.progress').hide();
                    $("#"+file.id).find('input').val(response.url);
            });
            
        });
        
    });
    
</script>